<template>
	<view>
		<u-popup :show="tasteHomeShow" mode='center' round="15" @close="close" @open="open">
			<view class="Details_popu animate__animated animate__bounceIn">
				<image src="../static/nav/soup/closeIcon.png" class="closeIcon" mode="" @click="close">
				</image>
				<image class="details_img" :src="menuInfo.url" mode=""></image>
				<view class="details_info">
					<text class="title">{{menuInfo.showName || '--'}}</text>
					<view class="title_info">
						{{menuInfo.showIntroduce || '--'}}
						<u-divider></u-divider>
						<!-- 选项 -->
						<scroll-view class="taste-item-c" :scroll-y="true">
							<view class="taste-item-c-row" v-for="(item , index) in menuInfo.hjDishFlavorVos"
								:key="item.id">
								<text class="popu_title">{{item.showName}}</text>
								<view class="taste-item-ju">
									<view class="taste-item-index" v-if="item.hjDishFlavorDetailVos"
										:class="item2.show?'taste-item-y':'taste-item-n'"
										v-for="(item2 , index2) in item.hjDishFlavorDetailVos" :key="item2.id"
										@click="ChooseAFlavor(index,index2)">
										{{item2.showName}}
									</view>
								</view>
							</view>
						</scroll-view>
						<!-- 选项 -->
						<!-- <view class="taste-item-ju">
							<text class="popu_title">请选择辣度</text>
							<view class="" :class="item.show?'taste-item-y':'taste-item-n'"
								v-for="(item , index) in list1" :key="index" @click="list1Fun(index)">
								微辣
							</view>
						</view> -->
					</view>

					<view class="price-c pa-v">
						<view class="price-number">{{menuInfo.price}}€
							<!-- <text class="weight">大份</text> -->
						</view>
						<text class="add" @click="tasteSelectFun" >+</text>
						<!-- <commodityNumberInput  :value ='menuInfo'  @change="tasteSelectFun" :max="1" /> -->
						<!-- <NumberInput small :value="menuInfo.num"  :itemvalue='menuInfo'
							@change="cartCountChange($event)" v-on="$listeners" :max="99" /> -->
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import NumberInput from '@/components/NumberInput.vue'
	export default {
		name: "tastePopu",
		props: {
			tasteHomeShow: Boolean,
			menuInfo: Object
		},
		components: {
			NumberInput
		},
		data() {
			return {

			};
		},
		methods: {
			close() {
				this.$emit("tasteHomeShowFun", false)
			},
			open() {
				this.bus.$emit("ESend", this.egift);
			},
			// 选择
			ChooseAFlavor(e, i) {
				// this.list1.forEach((item, index) => {
				// 	if (index == e) {
				// 		item.show = true
				// 	} else {
				// 		item.show = false
				// 	}
				// })
				this.$emit('ChooseAFlavorFun', e, i)
			},
			tasteSelectFun(e) {
				this.$emit("placeAnOrder", e, true)
				// // input  加1
				// this.bus.$emit('addPopu', false)
			}

		}

	}
</script>

<style lang="scss" scoped>
	.popu-qy {
		width: 386px;
		padding: 20px 16px;
		background-color: $qy-bg-nav-option-color;
		border-radius: 10px;
		color: $uni-text-color;
		font-size: 14px;
		position: relative;
	}

	.popu_title {
		color: $qy-text-color-title;
		font-size: 18px;
		margin-top: 5px;
		width: 100px;
	}

	.closeIcon {
		width: 24px;
		height: 24px;
		position: absolute;
		right: 16px;
		top: 20px;
	}

	.taste-item-c {
		height: 150px;
	}

	.taste-item-c-row {
		display: flex;
		flex-direction: column;
	}

	.taste-item-ju {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		align-items: center;
		flex: 1;
margin-top: 10px;
gap: 16upx;
		// padding: 16px 0px 24px 0px;
		.taste-item-index {
			margin-bottom: 24px;
		}

		.taste-item-y {
			border-radius: 10px;
			background-color: $uni-text-color-zbt-f;
			padding: 8px 16px;
			color: $uni-text-color;
			font-size: 14px;
			// margin-left: 16px;
		}

		.taste-item-n {
			border-radius: 10px;
			background-color: $qy-bg-popu-list-n-color;
			padding: 8px 16px;
			color: $uni-text-color-inverse;
			font-size: 14px;
			// margin-left: 16px;
		}

	}

	.top_popu_clas {
		margin-top: 24px;
	}

	.but-c {
		width: 172px;
		height: 50px;
		margin: 0 auto;

	}

	.but-conten {
		display: flex;
		margin: 0 auto;
	}

	.Details_popu {
		width: 65vw;
		min-height: 340px;
		padding: 20px;
		background-color: $qy-bg-popu-conten-color;
		border-radius: 10px;
		display: flex;
		align-items: center;

		.details_img {
			width: 400px;
			height: 300px;
			// margin-left: 24px;
			border-radius: 20px;
		}

		.details_info {
			display: flex;
			flex: 1;
			flex-direction: column;
			height: 300px;
			margin-left: 16px;

			.title {
				font-size: 22px;
				color: $uni-text-color;
			}

			.title_info {
				margin-top: 11px;
				color: $uni-text-color;
				font-size: 16px;
				display: flex;
				flex: 1;
				flex-direction: column;
			}
		}
	}

	.price-c {
		margin-top: 14px;
		display: flex;
		font-size: 20px;
		color: $uni-money-text-color;

		.price-number {
			display: flex;
			flex: 1;
		}
	}

	// .pa-v {
	// 	position: absolute;
	// 	bottom: 40px;
	// 	display: flex;
	// }

	.closeIcon {
		width: 24px;
		height: 24px;
		position: absolute;
		right: 17px;
		top: 17px;

	}

	.weight {
		margin-left: 11px;
		margin-top: 2px;
		color: $uni-text-color-inverse;
		font-size: 16px;
	}
	.add {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		display: flex;
			align-items: center;
			justify-content: center;
		font-size: 24px;
		line-height: 23px;
	
		// font-weight: bolder;
		&.disabled {
			opacity: 0.5;
		}
	}
	.add {
		background: $uni-text-color-zbt-f;
		color: $uni-text-color;
	}
</style>